<template>
  <div class="AboutView">
    <!-- <div>
      <div id="newCharts"></div>
    </div>
    <div>
      <div id="scatterCharts"></div>
    </div> -->
    <div
      class="flexbox"
      style="margin-top: calc((100vw - 80px) * 0.01); display: none"
    >
      <div class="databox box-shadow" style="width: 97.5%">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          各区县二手房总价盒须图
        </h2>
        <div id="boxplotCharts"></div>
      </div>
    </div>

    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div class="databox box-shadow" style="width: 97.5%">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          增量更新-统计
        </h2>
        <apex-chart
          width="100%"
          height="300"
          :options="heatmapCharts.chartOptions"
          type="heatmap"
          :series="heatmapCharts.series"
        ></apex-chart>
      </div>
    </div>
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div class="databox box-shadow" style="width: 25%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          CPU利用率
        </h2>
        <p class="mb-0 flex">
          CPU利用率是通过服务器内部监控组件采集上报，数据更加精准
        </p>
        <div>
          <apex-chart
            type="area"
            height="250"
            :options="analyticsData.CPU_utilization.chartOptions"
            :series="analyticsData.CPU_utilization.series"
          />
        </div>
      </div>
      <div class="databox box-shadow" style="width: 30%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          内存使用量
        </h2>
        <p class="mb-0 flex">
          使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集
        </p>
        <div>
          <apex-chart
            type="area"
            height="250"
            :options="analyticsData.Memory_usage.chartOptions"
            :series="analyticsData.Memory_usage.series"
          />
        </div>
      </div>
      <div class="databox box-shadow" style="width: 40%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          公网带宽
        </h2>
        <p class="mb-0 flex">
          外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出
        </p>
        <div>
          <apex-chart
            type="area"
            height="250"
            :options="analyticsData.Public_network_bandwidth.chartOptions"
            :series="analyticsData.Public_network_bandwidth.series"
          />
        </div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div class="databox box-shadow" style="width: 48%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          MongoDB数据库各表占用
        </h2>
        <p class="mb-0 flex">MongoDB数据库中的各个数据表大小占用</p>
        <div>
          <apex-chart
            type="treemap"
            height="350"
            :options="analyticsData.MongoDB_data_percent.chartOptions"
            :series="analyticsData.MongoDB_data_percent.series"
          ></apex-chart>
        </div>
      </div>
      <div class="databox box-shadow" style="width: 48%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          线程-进程
        </h2>
        <p class="mb-0 flex">只显示参与爬虫与数据分析的线程与进程数量</p>
        <div>
          <apex-chart
            type="line"
            height="350"
            :options="analyticsData.process_and_thread.chartOptions"
            :series="analyticsData.process_and_thread.series"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
import * as echarts from "echarts";
import analyticsData from "./data/analyticsData.js";
export default {
  data() {
    return {
      analyticsData: analyticsData,
      formatter: "￥{value}",
      heatmapCharts: {
        series: [
          {
            name: "Metric1",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric2",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric3",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric4",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric5",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric6",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric7",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric8",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
          {
            name: "Metric9",
            data: this.generateData(60, {
              min: 0,
              max: 90,
            }),
          },
        ],
        chartOptions: {
          chart: {
            height: 350,
            type: "heatmap",
          },
          dataLabels: {
            enabled: false,
          },
          plotOptions: {
            heatmap: {},
          },
          colors: ["#008FFB"],
        },
      },
      selection: "one_year",
    };
  },
  mounted() {
    // this.showCharts();
    // // this.showscatter();
    // this.showMap();
    this.showboxplot();
  },
  methods: {
    // 展示折线图
    showCharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("newCharts")); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option;

      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: "Large Area Chart",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "Fake Data",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#6b9dfe",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#d5d9f8",
                },
                {
                  offset: 1,
                  color: "#6b9dfe",
                },
              ]),
            },
            data: data,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 展示散点图
    showscatter() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("scatterCharts")
      ); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option;

      option = {
        // title: {
        //   text: 'Dispersion of house price based on the area',
        //   left: 'center',
        //   top: 0
        // },
        visualMap: {
          min: 15202,
          max: 159980,
          dimension: 1,
          orient: "vertical",
          right: 0,
          top: "center",
          text: ["HIGH", "LOW"],
          calculable: true,
          inRange: {
            color: ["#d5d9f8", "#6b9dfe"],
          },
          show: false,
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "price-area",
            type: "scatter",
            symbolSize: 5,
            data: require("../assets/data.json"),
          },
        ],
      };
      myChart.setOption(option);
    },
    // 展示地图
    showMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("scatterCharts")
      ); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option;
      myChart.hideLoading();
      echarts.registerMap("重庆", require("../assets/usa.json"), {
        Alaska: {
          left: -131,
          top: 25,
          width: 15,
        },
        Hawaii: {
          left: -110,
          top: 28,
          width: 5,
        },
        "Puerto Rico": {
          left: -76,
          top: 26,
          width: 2,
        },
      });
      option = {
        title: {
          text: "USA Population Estimates (2012)",
          subtext: "Data from www.census.gov",
          sublink: "http://www.census.gov/popest/data/datasets.html",
          left: "right",
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          left: "right",
          min: 500000,
          max: 18000000,
          inRange: {
            color: [
              "#f3f7ff",
              "#e7efff",
              "#dbe7ff",
              "#e0f3f8",
              "#b7cffe",
              "#c3d7ff",
              "#abc7fe",
              "#9fbffe",
              "#93b7fe",
              "#87affe",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: "left",
          top: "top",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "重庆 PopEstimates",
            type: "map",
            roam: true,
            map: "重庆",
            emphasis: {
              label: {
                show: true,
                fontWeight: "bold", // 设置区县名字的字体加重
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                // 设置区县的默认样式
                borderColor: "#fff", // 设置分割线的颜色为纯白色
                borderWidth: 4, // 设置分割线的宽度为1
                areaColor: "#eee", // 设置区县的默认背景颜色
                label: {
                  color: "#fff",
                  fontWeight: "bold",
                },
              },
              emphasis: {
                // 设置鼠标悬停时区县的样式
                areaColor: "#87affe", // 设置区县的悬停背景颜色为淡蓝色
              },
            },
            data: [
              { name: "渝中区", value: 10642444 },
              { name: "大渡口区", value: 10104968 },
              { name: "江北区", value: 11126787 },
              { name: "沙坪坝区", value: 7914124 },
              { name: "九龙坡区", value: 10169698 },
              { name: "南岸区", value: 10046382 },
              { name: "北碚区", value: 7954541 },
              { name: "綦江区", value: 10249764 },
              { name: "大足区", value: 8460452 },
              { name: "渝北区", value: 10430564 },
              { name: "巴南区", value: 10031500 },
              { name: "黔江区", value: 11544225 },
              { name: "长寿区", value: 10710884 },
              { name: "江津区", value: 10886878 },
              { name: "合川区", value: 8149302 },
              { name: "永川区", value: 7349181 },
              { name: "南川区", value: 7510109 },
              { name: "璧山区", value: 10246437 },
              { name: "铜梁区", value: 10392772 },
              { name: "潼南区", value: 10451186 },
              { name: "荣昌区", value: 731449 },
              { name: "开州区", value: 10865442 },
              { name: "梁平区", value: 10862057 },
              { name: "武隆区", value: 10456335 },
              { name: "城口县", value: 8238992 },
              { name: "丰都县", value: 8665318 },
              { name: "垫江县", value: 10666089 },
              { name: "忠县", value: 7947840 },
              { name: "云阳县", value: 11507187 },
              { name: "奉节县", value: 11387394 },
              { name: "巫山县", value: 8386618 },
              { name: "巫溪县", value: 10202143 },
              { name: "石柱土家族自治县", value: 10125519 },
              { name: "秀山土家族苗族自治县", value: 10549435 },
              { name: "酉阳土家族苗族自治县", value: 8528899 },
              { name: "彭水苗族土家族自治县", value: 10923819 },
              { name: "涪陵区", value: 7939388 },
              { name: "万州区", value: 8497893 },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 展示增量更新图
    showheatMap() {},
    generateData(count, yrange) {
      var i = 0;
      var series = [];
      while (i < count) {
        var x = (i + 1).toString();
        var y =
          Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
          yrange.min;

        series.push({
          x: x,
          y: y,
        });
        i++;
      }
      return series;
    },
    // 展示盒型图
    showboxplot() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("boxplotCharts")
      );
      // 随机生成每个区域的房价数据
      var data = [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
      ];
      for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < 10; j++) {
          data[i].push(Math.floor(Math.random() * 24001) + 6000); // 房价区间为 6000 到 30000
        }
      }

      var option = {
        tooltip: {},
        yAxis: {
          type: "category",
          data: [
            "江北",
            "渝北",
            "南岸",
            "巴南",
            "沙坪坝",
            "九龙坡",
            "渝中",
            "大渡口",
            "江津",
            "北碚",
            "开州区",
            "巫山县",
            "巫溪县",
            "秀山土家族苗族自治县",
            "酉阳土家族苗族自治县",
            "荣昌区",
            "彭水苗族土家族自治县",
            "忠县",
            "奉节县",
            "垫江县",
            "城口县",
            "铜梁",
            "璧山",
            "合川",
            "长寿",
            "万州",
            "涪陵",
          ],
        },
        xAxis: {},
        series: [
          {
            type: "boxplot",
            data: data,
            color: "#b8c5f2",
            itemStyle: {
              color: "#b8c5f2",
            },
            tooltip: {
              formatter: function (params) {
                return params.name + ": " + params.value[2] + " 元/m²";
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.AboutView {
  flex: 1;
  height: 100vh;
  background-color: #f6f6f7;
  overflow-y: auto;
}

#newCharts {
  margin: 0 auto;
  width: 800px;
  height: 400px;
}

#scatterCharts {
  width: 1250px;
  height: 1000px;
}
#boxplotCharts {
  width: 100%;
  height: 1000px;
}
</style>
